<template>
    <div class="wrapper" :style="mainStyle">
        <navigation-bar title="个人信息" :onLeftButtonClick="backRouter"
                        :rightIcon="' '"></navigation-bar>
        <scroller>
            <div style="width: 750px">
                <wxc-cell title="头像"
                          :has-arrow="true"
                          @wxcCellClicked="updateAvater"
                          :has-top-border="false">
                    <slot name="title"></slot>
                </wxc-cell>
                <wxc-cell title="昵称"
                          :has-arrow="true"
                          @wxcCellClicked="updateName"
                          :has-top-border="false">
                    <slot name="title">
                        <text class="user-info">{{userData.name}} </text>
                    </slot>
                </wxc-cell>
                <wxc-cell title="手机号"
                          :has-arrow="true"
                          @wxcCellClicked="updateMobile"
                          :has-top-border="false">
                    <slot name="title">
                        <text class="user-info">{{userData.mobile}} </text>
                    </slot>
                </wxc-cell>

            </div>
        </scroller>
        <div class="button-box">
            <wxc-button text="退出当前帐号" type="red"
                        :btn-style="{flex:'1', width:'650px',marginTop: '20px', marginBottom:'20px', backgroundColor: '#00BB9A',borderRadius:'36px'}"
                        @wxcButtonClicked="onLoginOut">

            </wxc-button>
        </div>
    </div>
</template>

<script>
  import { WxcCell, WxcButton, Utils } from 'weex-ui'
  import NavigationBar from './widget/NavigationBar.vue'
  import { getEntryPageStyle } from '../config/Config'
  import user from '../core/net/user'

  export default {
    components: {WxcCell, WxcButton, NavigationBar},
    data () {
      return {
        mainStyle: {},
        userData: {},
      }
    },
    created: function () {
      let mainStyle = getEntryPageStyle(Utils)
      mainStyle.marginTop = 0
      this.mainStyle = mainStyle
      this.loadUserInfo()
    },
    methods: {
      updateAvater(){

      },
      updateName () {
        this.jumpWithParams('UpdateName')
      },
      updateMobile () {
        this.jumpWithParams('UpdateMobile')
      },
      loadUserInfo () {
        user.getUserInfoDao().then((res) => {
          if (res && res.result) {
            this.userData = res.data
          }
        })
      },
      onLoginOut () {
        user.cleanUserInfoLocal()
        this.reset('/login')
      },
      backRouter () {
        if (this.$router) {
          this.$router.back()
        }
      },
    }
  }
</script>

<style lang="scss">
    @import '../config/styles.scss';

    .wrapper {
        background-color: $--container-color;
        width: 750px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    .user-info {
        color: #434A54;
        font-size: 28px;
    }
    .button-box {
        position: absolute;
        bottom: 200px;
        left: 0;
        width: 750px;
        align-items: center;
        justify-content: center
    }
</style>
<style scoped>
</style>
